<template>
  <section class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">订单ID：{{sysOrderId || '--'}}</span>
    </div>

    <div class="f-card">
      <p class="f-title">基本信息</p>
      <ul class="f-ul">
        <li>
          <p>商户ID：</p>
          <p>{{orderInfo.uniqueId || '--'}}</p>
        </li>
        <li>
          <p>商户名称：</p>
          <p>{{orderInfo.uniqueName || '--'}}</p>
        </li>
        <li>
          <p>订单状态：</p>
          <p>{{ orderStatus[orderInfo.orderStatus] || '--'}}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">提现信息</p>
      <ul class="f-ul">
        <li>
          <p>申请总额：</p>
          <p>{{orderInfo.totalMoney}}元</p>
        </li>
        <li>
          <p>手续费：</p>
          <p>{{orderInfo.serviceMoney}}元</p>
        </li>
        <li>
          <p>应得金额：</p>
          <p>{{orderInfo.actualMoney}}元</p>
        </li>
        <li>
          <p>发放方式：</p>
          <p>{{ payType[orderInfo.payType]}}</p>
        </li>
        <li>
          <p>发放账号：</p>
          <p>{{orderInfo.toAccount}}</p>
        </li>
        <li>
          <p>创建时间：</p>
          <p>{{getDateTime( orderInfo.createTime)[6]}}</p>
        </li>
      </ul>
    </div>

    <!-- <div class="f-card">
      <p class="f-title">发放明细</p>
      <el-timeline>
        <el-timeline-item v-for="(item, index) in incomeList" :key="index" :timestamp="getDateTime(item.crateTime)[6]"
          placement="top">
          <div v-if="item.withdrawType == 1" class="g-flex-ct">
            <p>申请提现</p>
            <p class="f-ml-20" style="color:#1940C0">{{item.money}}元</p>
            <p class="f-ml-20">提现方式：{{item.mode == 1? '支付宝': '银行卡'}}</p>
            <p class="f-ml-20">提现账号：{{item.toAccountId }}</p>
          </div>
          <div v-if="item.withdrawType == 2" class="g-flex-ct">
            <p>佣金扣除</p>
            <p class="f-ml-20" style="color:red">-{{item.money}}元</p>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div> -->
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad, getStore } from '@/utils/utils'
import api from '../api.js'

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      sysOrderId: route.query.sysOrderId,
      orderInfo: {},

      orderStatus: {
        '1': '发起提现',
        '2': '已关闭',
        '3': '提现失败',
        '4': '提现成功',
        '5': '待人工处理'
      },
      payType: {
        '2': '微信',
        '3': '支付宝',
        '11': '银行卡'
      },
    })

    onMounted(() => {
      getOrderWithdrawDetail()
    })

    const getOrderWithdrawDetail = () => {
      let josn = {
        sysOrderId: state.sysOrderId,
      }
      api.orderWithdrawDetail(josn).then(res => {
        state.orderInfo = res.data
      })
    }

    return {
      ...toRefs(state),
      getDateTime
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  > .title-box {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 33.3%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 85px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
    .f-goods-box {
      display: flex;
      align-items: center;
      .f-goods {
        width: 50%;
        .f-goods-card {
          width: 448px;
          padding: 8px 10px;
          background: #ffffff;
          display: flex;
          img {
            width: 152px;
            height: 84px;
            margin-right: 15px;
          }
          .f-desc-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .f-desc-name {
              font-weight: 600;
              font-size: 16px;
              color: #010101;
            }
            .f-desc-price {
              font-weight: 400;
              font-size: 20px;
              color: #f60000;
            }
            .f-desc-price-1 {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-decoration-line: line-through;
              margin-left: 10px;
            }
          }
        }
      }
      .f-goods-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
</style>